<template>
  <h1>Hello Vue App!</h1>
  <button @click="increment">
    {{ count }}
  </button>
<!--  模板语法-->
  <span>Message: {{ message }}</span>
<!--  属性绑定-->
  <div :id="dynamicId"></div>
  <button :disabled="isButtonDisabled">Button</button>
  <div v-bind="attrObject"></div>

<!--  if else-->
  <div class="msg1" v-if="seen"></div>
  <div class="msg2" v-else-if="seen"></div>
  <div class="msg3" v-else></div>

  <div class="msg4" v-show="seen"></div>
  <div class="msg5" v-show="!seen"></div>
<!--  for-->
  <ul>
    <li v-for="(item, index) in lists" :key="index">{{index}} - {{item}}</li>
  </ul>
  <button @click="clickMe">按钮</button>
  <div class="msg1" @mouseover="clickMe"></div>
  <div style="margin-top: 100px">
    <p>显示名字： {{username}}</p>
    <label>名字:</label>
    <input style="width: 400px; height: 100px" v-model="username"/>
  </div>
  <div style="margin-top: 50px">
    <p>已选的爱好： {{likes}}</p>
    爱好：
    <input type="checkbox" value="打游戏" v-model="likes" />
    <span>打游戏</span>
    <input type="checkbox" value="看电影" v-model="likes" />
    <span>看电影</span>
    <input type="checkbox" value="打篮球" v-model="likes" />
    <span>打篮球</span>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  const count = ref(0)
  const message = ref('hello vue')
  const dynamicId = ref('123456')
  const isButtonDisabled = ref(true)
  //创建对象
  const attrObject = {
    id: '123456',
    name: "xyz"
  }

  const seen = ref(true)
  const ok = ref(true)

  //创建一个列表
  const lists = ["张三","李四","王武"]

  function increment() {
    count.value++
  }

  //函数式编程：将函数当成一个值来使用
  const clickMe = () => {
    alert('我被点击了！')
  }
  //和上面的是一样的效果
  // function clickMe(){
  //   alert('我被点击了')
  // }

  const username = ref("张三")

  const likes = ref([])
  // 可以直接侦听一个 ref
  watch(likes, async (newLikes, oldLikes) => {
    //逻辑判断：当值瞒住某一个条件的时候提示
    if (newLikes.indexOf('看电影') > -1) {
      alert('你选择【看电影】')
    }
  })
</script>

<style scoped>
  .msg1 {
    width: 80px;
    height: 100px;
    background-color: darkcyan;
  }
  .msg2 {
    width: 80px;
    height: 100px;
    background-color: red;
  }
  .msg3 {
    width: 80px;
    height: 100px;
    background-color: gray;
  }
  .msg4 {
    width: 80px;
    height: 100px;
    background-color: green;
  }
  .msg5 {
    width: 80px;
    height: 100px;
    background-color: black;
  }
</style>
